import React from 'react'
import { StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import Modal from 'react-native-modal'
import { IS_ANDROID, IS_IPHONEX, ScaleS } from '../../utils/ScreenUtil'
// https://github.com/listenzz/react-native-modal-translucent
export default function CustomModalAnimatable (props) {
  const { onCancel, onModalHideTemp, visible, children, style } = props
  this.onCancel = () => {
    onCancel && onCancel()
  }
  this.onModalHide = () => {
    console.info('modal onModalHide')
    onModalHideTemp && onModalHideTemp()
  }
  const modalProps = {}

  if (IS_ANDROID) {
    modalProps.onModalHide = this.onModalHide
  } else {
    modalProps.onDismiss = this.onModalHide
  }
  return (
    <Modal
      style={[styles.modalcontainer, style]}
      isVisible={visible}
      useNativeDriver={true}
      backdropOpacity={0.7}
      hideModalContentWhileAnimating={true}
      onBackdropPress={this.onCancel}
      onBackButtonPress={this.onCancel}
      {...modalProps}
    >
      {children}
    </Modal>
  )
}

CustomModalAnimatable.propTypes = {
  onCancel: PropTypes.func,
  onConfirm: PropTypes.func,
  onModalHideTemp: PropTypes.func,
  visible: PropTypes.bool,
  confirmed: PropTypes.bool,
  children: PropTypes.node,
  style: PropTypes.object
}
const styles = StyleSheet.create({
  modalcontainer: {
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'flex-end',
    paddingBottom: IS_IPHONEX ? ScaleS(20) : 0,
    margin: 0
  }
})
